<template>
  <div>
    <van-nav-bar
      title="标题"
      name="arrow-left"
      left-arrow
    />
    <section>
      <div
        v-for="(item,i) in data"
        :key="i"
        class="qa-list"
      >
        <div class="box">
          <div
            class="qa-text"
          >
            {{ item.title }}
          </div>
          <div
            class="thumbs-up"
          >
            <span>赞同 {{ item.likeCount>999? 999+ '+':item.likeCount }}</span>
            <span> 评论 {{ item.commentCount>99? 99+ '+': item.commentCount }}</span>
            <span>{{ getTime(item.pubTimestamp) }}</span>
          </div>
        </div>
        <img :src="item.thumbSrc">
      </div>
    </section>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'QaPage',
  // props:{ },
  data() {
    return {
      data: new Array(100)
        .fill(0)
        .map(() => ({
          // 标题
          title: '作为IT行业的过来人，你有什么话相对后辈说的？？？？？？？？？',
          // 点赞数 超过999显示为999+
          likeCount: 1234,
          // 评论数 超过999显示为999+
          commentCount: 555,
          // 发布时间
          pubTimestamp: 1658482134742,
          // 缩略图
          thumbSrc: 'https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73',
        })),
    };
  },
  methods: {
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
  }

}
</script>

<style lang="less" scoped>
section{
height: calc(100% - 46px);
overflow: auto;
padding:  20px;
// overflow: auto;
}
.qa-text{
  /* 有限的空间才能有溢出的可能 */
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.qa-list{
  margin-bottom: 20px;
    height: 14vh;
    border-bottom: 1px solid rgb(164, 164, 164);
    display: flex;
    // width: 200px;
    // border: 1px solid;

}
.thumbs-up{
margin-top: 5%;
}
img{
  width: 18vh;
  height: 11vh;
  border-radius: 5px;
}
.thumbs-up span{
  margin-top: 20px;
  margin-right: 5px;
font-size: 12px;
color: rgb(134, 132, 132);
}
</style>>
